<template>
  <el-header class="right-header" height="max-content">
    <Header>
      <template #leftContent>
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane :label="$t('资产总览')" name="1"> </el-tab-pane>
          <el-tab-pane :label="$t('交易订单')" name="2"></el-tab-pane>
        </el-tabs>
      </template>
    </Header>
  </el-header>
  <div class="bg-[#fff] p-5">
    <Assets v-if="activeName == 1" />
    <Records v-if="activeName == 2" />
  </div>
</template>
<script setup>
// 引入组件
import Records from "./records.vue";
import Assets from "./assets.vue";

import { ref, reactive, watch, computed } from "vue";
import { useUserStore } from "@/store/modules/user";
import { getWalletHomeNewApi } from "@/api/wallet/index";
import { numberToCurrencyNo } from "@/utils/utils";
import { ElMessage } from "element-plus";
import router from "../../router";
const useUser = useUserStore();
const activeName = ref("1");

const loading = ref(true);

let walletData = reactive({
  total: 0,
  list: [],
  assets_unit: "$",
});

//是否可以发送
const isItPossibleToSend = computed(() => {
  return walletData.total !== "0";
});
// 获取币种列表
const getWalletHomeData = async () => {
  try {
    loading.value = true;
    const { total_assets, assets_unit, coins_list } =
      await getWalletHomeNewApi();
    walletData.total = numberToCurrencyNo(Number(total_assets));
    walletData.list = coins_list;
    walletData.assets_unit = assets_unit;
    //储存币种列表
    useUser.setCoinListInfo(coins_list);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
getWalletHomeData();

// 控制发送弹窗显示
const isShowSendDrawer = ref(false);
// 控制接收弹窗显示
const isShowReceiveDrawer = ref(false);
// 控制发送成功弹窗显示
const isShowOrderDetail = ref(false);
const currentBillNo = ref("");
watch(
  () => currentBillNo.value,
  (newVal) => {
    console.log(newVal);
    if (newVal) {
      isShowOrderDetail.value = true;
    } else {
      isShowOrderDetail.value = false;
    }
  }
);
const showSendDrawer = () => {
  if (isItPossibleToSend.value) {
    isShowSendDrawer.value = true;
  } else {
    ElMessage({
      showClose: true,
      message: t("余额不足"),
      type: "error",
      grouping: true,
    });
  }
};

const isShowBuyCoinDrawer = ref(false);
const buyCoins = () => {};

// 跳转到单个币种详情页
const jumpToDetail = (coin_name) => {
  router.replace({ name: "wallet_detail", params: { coin_name } });
};
</script>
<style lang="scss">
.walletHeaderCont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
./assets.vue
